<template>
    <view class="container">
        <view class="tag-list">
            <view class="tag-item" v-for="(tag, index) in tags" :key="index" @click="goToTagPosts(tag)">
                <view class="tag-content">
                    <view class="tag-left">
                        <text class="tag-name">{{ tag.name }}</text>
                        <text class="tag-count">({{ tag.count || 0 }})</text>
                    </view>
                    <uni-icons type="right" size="16" color="#999"></uni-icons>
                </view>
            </view>
        </view>

        <!-- 加载状态 -->
        <view class="loading-box" v-if="loading">
            <view class="loading">
                <view class="loading-spinner"></view>
                <text>加载中...</text>
            </view>
        </view>

        <!-- 空状态 -->
        <view class="empty-state" v-if="!loading && tags.length === 0">
            <text>暂无标签</text>
        </view>
    </view>
</template>
  
<script>
import api from '@/api/wordpress'

export default {
    data() {
        return {
            tags: [],
            loading: false
        }
    },

    onLoad() {
        this.getTags()
    },

    // 下拉刷新
    onPullDownRefresh() {
        this.getTags()
    },

    methods: {
        async getTags() {
            this.loading = true
            try {
                const res = await api.getTags()
                if (res.statusCode === 200 && res.data) {
                    // 按文章数量排序
                    this.tags = res.data.sort((a, b) => (b.count || 0) - (a.count || 0))
                }
            } catch (e) {
                console.error('获取标签失败:', e)
                uni.showToast({
                    title: '获取标签失败',
                    icon: 'none'
                })
            } finally {
                this.loading = false
                uni.stopPullDownRefresh()
            }
        },

        goToTagPosts(tag) {
            uni.navigateTo({
                url: `/pages/tag/posts?id=${tag.id}&name=${encodeURIComponent(tag.name)}`
            })
        }
    }
}
</script>
  
<style>
.container {
    padding: 20rpx;
    min-height: 100vh;
    background-color: #f5f6fa;
}

.tag-list {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.tag-item {
    border-bottom: 1px solid #f5f5f5;
}

.tag-item:last-child {
    border-bottom: none;
}

.tag-content {
    padding: 30rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tag-left {
    display: flex;
    align-items: center;
    gap: 10rpx;
}

.tag-name {
    font-size: 32rpx;
    color: #333;
    font-weight: 500;
}

.tag-count {
    font-size: 28rpx;
    color: #999;
}

/* 加载状态 */
.loading-box {
    padding: 40rpx 0;
    text-align: center;
}

.loading {
    display: inline-flex;
    align-items: center;
}

.loading-spinner {
    width: 40rpx;
    height: 40rpx;
    border: 4rpx solid #f3f3f3;
    border-top: 4rpx solid #ff5722;
    border-radius: 50%;
    margin-right: 16rpx;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.loading text {
    font-size: 28rpx;
    color: #999;
}

/* 空状态 */
.empty-state {
    padding: 60rpx;
    text-align: center;
    color: #999;
    font-size: 28rpx;
}

/* 点击效果 */
.tag-item:active {
    background-color: #f9f9f9;
}
</style>